<template>
  <BasicDialog ref="basicDialog" :isVisible="isAlert" width="50%" :title="DialogTitle" @handleSure="handleSure" :isShowSure="flag != 'tenant_look'">
    <template #content>
      <el-form ref="formRef" :model="formInfo" :rules="flag != 'tenant_look' ? rules : {}" label-width="120px">
        <el-form-item label="租户名称：" prop="tname">
          <el-input type="text" v-model.trim="formInfo.tname" maxlength="20" placeholder="请输入租户名称"
            :disabled="isDisabled" />
        </el-form-item>
        <el-form-item label="登录名：" prop="loginName">
          <el-input type="text" v-model.trim="formInfo.loginName" maxlength="18" placeholder="请输入登录名"
            :disabled="isDisabled || flag == 'tenant_edit'" />
        </el-form-item>
        <el-form-item label="联系人：" prop="contactName">
          <el-input type="text" v-model.trim="formInfo.contactName" maxlength="20" placeholder="请输入租户名称"
            :disabled="isDisabled" />
        </el-form-item>
        <el-form-item label="手机号：" prop="contactMobile">
          <el-input type="text" v-model.trim="formInfo.contactMobile" maxlength="11" placeholder="请输入手机号码"
            :disabled="isDisabled" />
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-select v-model="formInfo.sex" placeholder="请选择性别" style="width: 100%" :disabled="isDisabled">
            <el-option v-for="op in sexOptions" :key="op.value" :value="op.value" :label="op.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input type="text" v-model.trim="formInfo.email" maxlength="64" placeholder="请输入邮箱"
            :disabled="isDisabled" />
        </el-form-item>
        <el-form-item label="状态：" prop="state">
          <el-select v-if="flag != 'tenant_look'" v-model="formInfo.state" placeholder="状态" clearable
            style="width: 100%">
            <el-option v-for="op in commonState" :key="op.value" :value="op.value" :label="op.label" />
          </el-select>
          <span v-else>{{ commonStateEnum[formInfo.state] }}</span>
        </el-form-item>
      </el-form>
    </template>
  </BasicDialog>
</template>
<script lang="ts" setup>
import { FormInfo } from "@components/common/BasicForm/BasicFormTypes";
import type { FormInstance, FormRules } from "element-plus";

import {
  tenantAdd,
  tenantEdit,
  getTenantById,
} from "@/request/apis/system/tenant";
import { DictTypeEnum, getDictDataList } from "@/utils/dict"
import { commonState, commonStateEnum } from "@/utils/staticData";

const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {};
    },
  },
  flag: {
    type: String,
    default: "",
  },
  isAlert: {
    type: Boolean,
    default: false,
  },
  parentData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isDisabled: {
    type: Boolean,
    defalut: false,
  },
  treeData:{
    require:true,
  }
});

const $emits = defineEmits(["closeDialog"]);


// 表单校验规则
const rules = reactive<FormRules>({
  tname: [{ required: true, message: "不能为空", trigger: "blur" }],
  logiName: [
    { required: true, message: "不能为空", trigger: "blur" },
    { pattern: /^[a-zA-Z0-9_]{6,18}$/, message: "登录名格式不正确，数字，字母，下划线组成6~18位", trigger: "blur" }
  ],
  contactName: [{ required: true, message: "不能为空", trigger: "blur" }],
  contactMobile: [
    { required: true, message: "不能为空", trigger: "blur" },
    { pattern: /^1[23456789]\d{9}$/, message: "手机号不正确", trigger: "blur" }
  ],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
  email: [
    { required: true, message: "不能为空", trigger: "blur" },
    { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: "邮箱格式不正确", trigger: "blur" }
  ],
  state: [{ required: true, message: "请选择性别状态不能为空", trigger: "change" }],
})


//用户性别列表
const sexOptions = ref([])
function getSexOptions(){
  sexOptions.value = getDictDataList(DictTypeEnum.性别);
}

// 提交表单校验
const formRef = ref<FormInstance>();
const basicDialog = ref();
async function handleSure() {
  formRef.value.validate((valid) => {
    if (valid) {
      basicDialog.value.changeLoading(true);
      let params = {
        ...formInfo.value,
      }
      if (props.flag === "tenant_add") {
        tenantAdd(params).then((res: Response) => {
          ElMessage.success("操作成功")
          $emits("closeDialog", 1);
          basicDialog.value.changeLoading(false);
        }).catch(err => {
          basicDialog.value.changeLoading(false);
        })
      } else {
        tenantEdit(params).then((res: Response) => {
          ElMessage.success("操作成功")
          $emits("closeDialog", 1);
          basicDialog.value.changeLoading(false);
        }).catch(err => {
          basicDialog.value.changeLoading(false);
        })
      }

    }
  });
}

//表单数据
let formInfo = ref<FormInfo>({});
let DialogTitle = ref("查看");
onMounted(() => {
  getSexOptions();
  if (props.flag === "tenant_add") {
    DialogTitle.value = "新增";
    formInfo.value.deptid = props.parentData.id
  } else if (props.flag === "tenant_edit") {
    DialogTitle.value = "修改"
  }

  if (props.flag !== 'tenant_add') {
    getTenantById(props.info.id).then((res: any) => {
      formInfo.value = res;
    })
  }
});
</script>

<style scoped lang="scss"></style>
